<template>
    <el-card shadow="always">
        <div style="padding-left:20px; padding:30px">
            浏览记录
        </div>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top:10px">
        <!-- <div class="searchContainer">
            <div class="searchInput">
                <input type="text" />
                <i></i>
                <button>搜索</button>
            </div>
        </div> -->
      
            <div class="">
                <div style="width: 270px;height:40px;background:#F5F7F9;float:left;border:1px solid #ccc;">
                    <svg style="margin:10px 5px 0 10px;" t="1666106292294" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2550" width="14" height="14">
                        <path
                            d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"
                            fill="#3D3D3D" p-id="2551"></path>
                    </svg>
                    <input v-model="keyword" type="text" style="border: none;outline: none;background:#F5F7F9;height:90%;" />
                </div>
                <button
                    style="float:left;height:40px;width:60px;margin-left:10px;background:#F5F7F9;color:#7d8090;border:none;" @click="Seachhandler">搜索</button>

                    <div  @click="flag=true" style="margin-left:800px;padding-top:10px;font-size:14px" v-if="Roomstore.historyList.length!=0 && flag==false">批量删除</div>

                    <div  v-if="flag" style="margin-left:750px;padding-top:10px;display:flex;font-size:14px;color:hotpink">
                        <span @click="flag=false ">取消</span>
                        <span style="margin:0 10px" >确定</span>
                        <div style="margin-left:10px" v-if="ischecked==false" @click="ischecked=true">全选</div>
                        <div style="margin-left:10px" v-else @click="ischecked=false">全不选</div>
                    </div>
            </div>


        <div class="videoList">
            <!-- 一个视频组件 -->
            <!-- <div class="videoItem" v-for="(item,index) in Roomstore.historyList" :key="item.id">
                <div class="left">
                    <img :src="item.momentBackup.cover[0]" alt="">
                </div>
                <div class="center">
                    <div class="title">{{item.momentTitle}}</div>
                    <span>视频课</span>
                    <div class="mind">
                        <img :src="item.momentBackup.creatorBackup.avatar" alt="">
                        <span>{{item.momentBackup.creatorBackup.name}}</span>
                    </div>
                </div>
                <div class="right">
                    <span>一小时前</span> 
                    <span>{{moment(item.createTime).format('hh:mm')}}</span>
                    <div>删除</div>
                </div>
            </div>  -->

            <el-table stripe :data="Roomstore.historyList">
                <el-table-column width="169">
                    <template v-slot="{row,$index}">
                        <img :src="row.momentBackup.cover[0]" style="wigth:169px;height:100px" />
                    </template>
                </el-table-column>
                <el-table-column width="550">
                    <template #="{row,$index}">
                        <div style="display:flex;flex-direction:column;">
                            <div>{{row.momentTitle}}</div>
                            <span style="margin: 10px 0;">视频课</span>
                            <div style="display: flex;">
                                <img  :src="row.momentBackup.creatorBackup.avatar" style='width:28px;height:28px;border-radius:50%;margin-right:10px;' alt="">
                                <span>{{row.momentBackup.creatorBackup.name}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="100">
                    一小时前
                </el-table-column>
                <el-table-column width="100">
                <template #="{row,$index}">
                    <div v-if="flag==false" @click="deldata(row.id)">删除</div>
                    <!-- 有高亮的图标 -->
                    <svg v-if="flag==true && ischecked==true" @click="ischecked=false" t="1666313781810" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1619" width="16" height="16"><path d="M512 0C228.266667 0 0 228.266667 0 512c0 283.733333 228.266667 512 512 512 283.733333 0 512-228.266667 512-512C1024 228.266667 795.733333 0 512 0zM832 384 492.8 723.2C469.333333 746.666667 426.666667 746.666667 403.2 723.2L192 512c0 0-32-32 0-64s64 0 64 0l192 192 320-320c0 0 32-32 64 0S832 384 832 384z" p-id="1620" fill="#db639b"></path></svg>
                    <!-- 无高亮的图标 -->
                    <svg v-if="flag==true && ischecked==false" @click="ischecked=true" t="1666313781810" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1619" width="16" height="16"><path d="M512 0C228.266667 0 0 228.266667 0 512c0 283.733333 228.266667 512 512 512 283.733333 0 512-228.266667 512-512C1024 228.266667 795.733333 0 512 0zM832 384 492.8 723.2C469.333333 746.666667 426.666667 746.666667 403.2 723.2L192 512c0 0-32-32 0-64s64 0 64 0l192 192 320-320c0 0 32-32 64 0S832 384 832 384z" p-id="1620" fill="#dbdbdb"></path></svg>
                </template>
                </el-table-column>

            </el-table>
               <el-pagination
               style="float:right"
                @current-change="currentChange"
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                layout=" prev, pager, next"
                :pager-count="5">
               </el-pagination>
        </div>

      
    </el-card>
</template>

<script setup lang="ts">
import useRoomstore from '../../../stores/room'
import {reqSeachData} from  '../../../api/room/index'
import { reactive,ref } from 'vue'


let currentPage=ref(1)
// 点击删除切换的标识
let flag=ref(false)
// 选中标识
let ischecked=ref(false)

// 搜索关键词
const keyword=ref('')
const Roomstore = useRoomstore()
let pageSize=ref(5)
let total=Roomstore.historyList.length
const currentChange=(page)=>{
    currentPage.value=page
}
// 点击icon图标切换高亮
// const handlerchecked=(id)=>{
//    const res= Roomstore.historyList.find(item=>item.id===id)
//    res.ischecked=true
// }

// 点击删除
const deldata=(id)=>{

}

// 点击搜索按钮
const Seachhandler=async()=>{
const result= await reqSeachData(keyword.value)
Roomstore.historyList=[]
Roomstore.historyList=result.data.content
keyword.value=''
// console.log(result);

}
</script>

<style scoped>

.searchContainer .searchInput {
    width: 100%;
}

.searchContainer .searchInput input {
    width: 270px;
    height: 35px;
    outline: none;
    border: 1px solid #EAECF0;
    border-radius: 4px;
    background: #f5f7f9;
}

.searchContainer .searchInput button {
    background: #f5f7f9;
    border-radius: 4px;
    color: #7d8090;
    font-size: 14px;
    display: inline-block;
    padding: 10px 17px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
}

</style>